<template>
	<view>
		<u-picker :show="show" :columns="columns" @cancel="show=false" @confirm="confirm" keyName="name"></u-picker>
		<view class="box" v-if="step==1">
			<view class="header" style="margin-bottom: 0;padding-bottom: 10rpx;">
				<view class="item">
					<u-icon name="checkmark" size="13" color="#000000"></u-icon>
				</view>
				<view class="bor">

				</view>
				<view class="item">
					2
				</view>
				<view class="bor1">

				</view>
				<view class="item2">
					3
				</view>
				<view class="bor1">

				</view>
				<view class="item2">
					4
				</view>

			</view>
			<view class="header" style="margin-top: 0;padding-top: 0;">
				<view class="">
					注册账号
				</view>
				<view class="bor" style="opacity: 0;">

				</view>
				<view class="">
					主体资质
				</view>
				<view class="bor" style="opacity: 0;">

				</view>
				<view class="">
					店铺信息
				</view>
				<view class="bor" style="opacity: 0;">

				</view>
				<view class="">
					提交审核
				</view>

			</view>
			<view class="title">
				主体资质认证
			</view>
			<view class="input">
				<view class="view">
					店铺类型
				</view>
				<view class="flex" style="flex: 1;" @click="show=true">
					<view class="" style="flex: 1;">
						<u--input placeholder="请选择店铺类型" border="none" v-model="choose.name"></u--input>
					</view>
					<u-icon name="arrow-down"></u-icon>
				</view>
			</view>
			<view class="input">
				<view class="view">
					<text style="color: red;">*</text>
					<text v-if="form.state==0">姓名</text>
					<text v-if="form.state==1">企业名称</text>
					<text v-if="form.state==2">营业执照名称</text>
				</view>
				<u--input placeholder="请输入" border="none" v-model="form.name"></u--input>
			</view>
			<view class="input">
				<view class="view">
					<text style="color: red;">*</text>
					<text v-if="form.state==0">身份证号码</text>
					<text v-else>统一信用代码</text>
				</view>
				<u--input placeholder="请输入" border="none" v-model="form.number"></u--input>
			</view>
			<view class="input">
				<view class="view">

					微信
				</view>
				<u--input placeholder="请输入微信" border="none" v-model="form.wechat"></u--input>
			</view>
			<view class="input">
				<view class="view">
					<text style="color: red;">*</text>
					手机号
				</view>
				<u--input placeholder="请输入手机号" border="none" v-model="form.mobile" disabled></u--input>
			</view>
			<view class="input">
				<view class="view">
					商标证书/授权书
				</view>
				<view class="flex" style="flex: 1;">
					<u-upload :fileList="fileList1" name="1" :multiple="false" :maxCount="1" @afterRead="afterRead1"
						@delete="deletePic1"></u-upload>
				</view>
			</view>
			<!-- 			<view class="input">
				<view class="view">
					主营类目
				</view>
				<view class="flex" style="flex: 1;">
					<view class="" style="flex: 1;">
						<u--input placeholder="请选择主营类目" border="none"></u--input>
					</view>
					<u-icon name="arrow-down"></u-icon>
				</view>
			</view> -->
			<view class="input">
				<view class="view">
					<text style="color: red;">*</text>
					<text v-if="form.state==0">手持身份证</text>
					<text v-else>营业执照</text>

				</view>
				<view class="flex" style="flex: 1;">
					<u-upload :fileList="fileList2" name="1" :multiple="false" :maxCount="1" @afterRead="afterRead2"
						@delete="deletePic2"></u-upload>
				</view>
			</view>
			<view class="input">
				<view class="view">
					<text style="color: red;">*</text>

					<text v-if="form.state==1">法人身份证人像面</text>
					<text v-else>身份证人像面</text>
				</view>
				<view class="flex" style="flex: 1;">
					<u-upload :fileList="fileList3" name="1" :multiple="false" :maxCount="1" @afterRead="afterRead3"
						@delete="deletePic3"></u-upload>
				</view>
			</view>
			<view class="input">
				<view class="view">
					<text style="color: red;">*</text>
					<text v-if="form.state==1">法人身份证国徽面</text>
					<text v-else>身份证国徽面</text>
				</view>
				<view class="flex" style="flex: 1;">
					<u-upload :fileList="fileList4" name="1" :multiple="false" :maxCount="1" @afterRead="afterRead4"
						@delete="deletePic4"></u-upload>
				</view>
			</view>
		</view>
		<view class="box" v-if="step==2">
			<view class="header" style="margin-bottom: 0;padding-bottom: 10rpx;">
				<view class="item">
					<u-icon name="checkmark" size="13" color="#000000"></u-icon>
				</view>
				<view class="bor">

				</view>
				<view class="item">
					<u-icon name="checkmark" size="13" color="#000000"></u-icon>
				</view>
				<view class="bor">

				</view>
				<view class="item">
					3
				</view>
				<view class="bor1">

				</view>
				<view class="item2">
					4
				</view>
			</view>
			<view class="input">
				<view class="view">
					<text style="color: red;">*</text>
					店铺名
				</view>
				<view class="flex" style="flex: 1;">
					<u--input placeholder="请输入店铺名" border="none" v-model="form1.shopname"></u--input>
				</view>
			</view>
			<view class="input">
				<view class="view">
					<text style="color: red;">*</text>
					店铺简介
				</view>
				<view class="flex" style="flex: 1;">
					<u--input placeholder="请输入店铺简介" border="none" v-model="form1.bio"></u--input>
				</view>
			</view>
			<view class="input">
				<view class="view">
					<text style="color: red;">*</text>
					经营地址
				</view>
				<view class="flex" style="flex: 1;">
					<!-- <view class="" style="flex: 1;">
						<u--input placeholder="请选择经营地址" border="none"></u--input>
					</view>
					<u-icon name="arrow-down"></u-icon> -->
					<yhdslplace @change="change">
						<view class="place" :style="form1.city ? 'color: black;' : 'color: grey;'">
							{{ form1.city ? form1.city : '请选择经营地址' }}
						</view>
					</yhdslplace>
				</view>
			</view>
			<view class="input">
				<view class="view">
					店铺描述
				</view>
				<view class="flex" style="flex: 1;">
					<u--textarea placeholder="请输入店铺描述" border="none" v-model="form1.content"></u--textarea>
				</view>
			</view>
			<view class="input">
				<view class="view">
					<text style="color: red;">*</text>
					店铺图标
				</view>
				<view class="flex" style="flex: 1;">
					<u-upload :fileList="fileList5" name="1" :multiple="false" :maxCount="1" @afterRead="afterRead5"
						@delete="deletePic5"></u-upload>
				</view>
			</view>
		</view>
		<view class="box" v-if="step ==3">
			<view class="" style="text-align: center;font-weight: 600;padding: 30rpx;font-size: 34rpx;">
				资料已提交
			</view>
			<view class="input">
				<view class="view">
					主体名称
				</view>
				<view class="flex" style="flex: 1;">
					<text style="font-size: 30rpx;">{{info.name}}</text>
				</view>
			</view>
			<view class="input">
				<view class="view">
					主体证件
				</view>
				<view class="flex" style="flex: 1;">
					<text style="font-size: 30rpx;">{{info.number}}</text>

				</view>
			</view>
			<view class="input">
				<view class="view">
					手机号
				</view>
				<view class="flex" style="flex: 1;">
					<text style="font-size: 30rpx;">{{info.mobile}}</text>
				</view>
			</view>
			<view class="input">
				<view class="view">
					店铺名
				</view>
				<view class="flex" style="flex: 1;">
					<text style="font-size: 30rpx;">{{info.shopname}}</text>
				</view>
			</view>
			<view class="input">
				<view class="view">
					店铺简介
				</view>
				<view class="flex" style="flex: 1;">

					<text style="font-size: 30rpx;">{{info.bio}}</text>
				</view>
			</view>
			<view class="input">
				<view class="view">
					经营地区
				</view>
				<view class="flex" style="flex: 1;">
					<text style="font-size: 30rpx;">{{info.city}}</text>
				</view>
			</view>
			<view class="input">
				<view class="view">
					审核状态
				</view>
				<view class="flex" style="flex: 1;">
					<text style="color: #FFC400;font-size: 30rpx;" v-if="info.verify=='2'">店铺审核中</text>
					<text style="color: #ff2929;font-size: 30rpx;" v-if="info.verify=='4'">店铺审未通过</text>
					<text style="color: #4c9dff;font-size: 30rpx;" v-if="info.verify=='3'">店铺审核通过</text>
				</view>
			</view>
			<view class="input" v-if="info.verify=='4'">
				<view class="view">
					拒绝理由
				</view>
				<view class="flex" style="flex: 1;">
					<text style="color: #ff2929;font-size: 30rpx;">{{info.refuse}}</text>
				</view>
			</view>
		</view>

		<view class="btn" @click="top" v-if="step >1 && step !=3 &&  !info">
			上一步
		</view>
		<view class="btn" @click="next" v-if="step <2 && step !=3">
			下一步
		</view>
		<view class="btn" @click="submot" v-if="step ==2 && step !=3">
			提交
		</view>
		<view class="btn" @click="submot1" v-if="info && info.verify=='4' && isIn">
			重新申请店铺
		</view>
		<view class="btn" @click="back" style="background-color: #eaeaea;color: black;">
			{{step==3?'暂时先返回商城':'暂不申请，返回商城'}}
		</view>
		<view class="" style=" height: 30rpx;">

		</view>
	</view>
</template>
<script>
	import yhdslplace from '@/components/yhdsl-place/yhdsl-place.vue';
	export default {
		data() {
			return {
				show: false,
				isIn: true,
				columns: [
					[{
						id: 0,
						name: "个人"
					}, {
						id: 1,
						name: "企业"
					}, {
						id: 2,
						name: "个体户"
					}]
				],
				fileList: [],
				fileList1: [],
				fileList2: [],
				fileList3: [],
				fileList4: [],
				fileList5: [],
				form: {
					state: 0,
					name: "",
					number: "",
					mobile: "",
					image: "",
					idcardimage: "",
					backimage: "",
					trademark: "",
					wechat: ""
				},
				form1: {
					shopname: "",
					avatar: "",
					bio: "",
					city: "",
					content: ""
				},
				choose: {
					id: 0,
					name: "个人"
				},
				step: 1,
				info: null

			}
		},
		async onLoad() {
			wx.hideHomeButton();
			await uni.request({
				url: '/user/getShopAuth',
				header: {
					isAdmin: true,
					token: uni.getStorageSync("shop_login_token")
				},
				method: "get",
				success: async res => {
					console.log(res)
					if (res.data) {
						this.info = res.data;
						console.log(this.info)
						if (Number(this.info.verify) == 3) {
							uni.reLaunch({
								url: "/pagesA/index/index"
							})
						} else if (Number(this.info.verify) == 1) {
							this.step = 2;
						} else if (Number(this.info.verify) == 2) {
							this.step = 3;
						} else if (Number(this.info.verify) == 4) {
							if (this.info.trademark) {
								this.fileList1 = [{
									url: this.$wanlshop.oss(this.info.trademark, 100, 100),
									key: this.info.trademark
								}]
							}
							if (this.info.image) {
								this.fileList2 = [{
									url: this.$wanlshop.oss(this.info.image, 100, 100),
									key: this.info.image
								}]
							}
							if (this.info.idcardimage) {
								this.fileList3 = [{
									url: this.$wanlshop.oss(this.info.idcardimage, 100, 100),
									key: this.info.idcardimage
								}]
							}
							if (this.info.backimage) {
								this.fileList4 = [{
									url: this.$wanlshop.oss(this.info.backimage, 100, 100),
									key: this.info.backimage
								}]
							}
							if (this.info.avatar) {
								this.fileList5 = [{
									url: this.$wanlshop.oss(this.info.avatar, 100, 100),
									key: this.info.avatar
								}]
							}
							this.form = {
								state: Number(this.info.state),
								name: this.info.name,
								number: this.info.number,
								mobile: this.info.mobile,
								image: "",
								idcardimage: "",
								backimage: "",
								trademark: "",
								wechat: this.info.wechat
							}
							this.form1 = {
								shopname: this.info.shopname,
								avatar: "",
								bio: this.info.bio,
								city: this.info.city,
								content: this.info.content
							}
							this.step = 3;
						}

					}
				},
				complete() {
					uni.hideLoading()
				}
			});
		},
		onShow() {
			let info = uni.getStorageSync('shop_login_info');
			// this.form.mobile = '19909945454';
			this.form.mobile = info.mobile;
		},
		components: {
			yhdslplace
		},
		methods: {
			submot1() {
				this.isIn = false;
				this.info = null;
				this.step = 1;
			},
			async submot() {
				if (!this.form1.shopname) {
					uni.showToast({
						icon: "none",
						title: "请输入店铺名称"
					})
					return
				}
				if (!this.form1.city) {
					uni.showToast({
						icon: "none",
						title: "请选择店铺地址"
					})
					return
				}
				if (!this.form1.bio) {
					uni.showToast({
						icon: "none",
						title: "请输入店铺简介"
					})
					return
				}
				if (this.fileList5.length == 0) {
					uni.showToast({
						icon: "none",
						title: '上传店铺图标'
					})
					return
				}
				uni.showLoading({
					mask: true
				})
				let param2 = JSON.parse(JSON.stringify(this.form1));
				param2.avatar = this.fileList5[0].key;
				if (this.info.verify == '1') {
					await uni.request({
						url: '/user/stepthree',
						data: param2,
						header: {
							isAdmin: true,
							token: uni.getStorageSync("shop_login_token")
						},
						method: "POST",
						success: async res => {
							this.step += 1;
							uni.hideLoading()
							console.log(res)
						},
						complete() {
							uni.hideLoading()
						}
					});
					return
				}
				let param1 = JSON.parse(JSON.stringify(this.form));
				if (this.fileList.length > 0) {
					param1.trademark = this.fileList1[0].key;
				}
				param1.image = this.fileList2[0].key;
				param1.idcardimage = this.fileList3[0].key;
				param1.backimage = this.fileList4[0].key;

				await uni.request({
					url: '/user/entry',
					data: param1,
					header: {
						isAdmin: true,
						token: uni.getStorageSync("shop_login_token")
					},
					method: "POST",
					success: async res1 => {
						await uni.request({
							url: '/user/stepthree',
							data: param2,
							header: {
								isAdmin: true,
								token: uni.getStorageSync("shop_login_token")
							},
							method: "POST",
							success: async res2 => {
								await uni.request({
									url: '/user/getShopAuth',
									header: {
										isAdmin: true,
										token: uni.getStorageSync("shop_login_token")
									},
									method: "get",
									success: async res => {
										if (res.data) {
											this.info = res.data;
											console.log(this.info)
											if (Number(this.info.verify) == 3) {
												uni.reLaunch({
													url: "/pagesA/index/index"
												})
											} else if (Number(this.info.verify) ==
												1) {
												this.step = 2;
											} else if (Number(this.info.verify) ==
												2) {
												this.step = 3;
											} else if (Number(this.info.verify) ==
												4) {
												if (this.info.trademark) {
													this.fileList1 = [{
														url: this.$wanlshop
															.oss(this.info
																.trademark,
																100, 100),
														key: this.info
															.trademark
													}]
												}
												if (this.info.image) {
													this.fileList2 = [{
														url: this.$wanlshop
															.oss(this.info
																.image,
																100, 100),
														key: this.info
															.image
													}]
												}
												if (this.info.idcardimage) {
													this.fileList3 = [{
														url: this.$wanlshop
															.oss(this.info
																.idcardimage,
																100, 100),
														key: this.info
															.idcardimage
													}]
												}
												if (this.info.backimage) {
													this.fileList4 = [{
														url: this.$wanlshop
															.oss(this.info
																.backimage,
																100, 100),
														key: this.info
															.backimage
													}]
												}
												if (this.info.avatar) {
													this.fileList5 = [{
														url: this.$wanlshop
															.oss(this.info
																.avatar,
																100, 100),
														key: this.info
															.avatar
													}]
												}
												this.form = {
													state: Number(this.info
														.state),
													name: this.info.name,
													number: this.info.number,
													mobile: this.info.mobile,
													image: "",
													idcardimage: "",
													backimage: "",
													trademark: "",
													wechat: this.info.wechat
												}
												this.form1 = {
													shopname: this.info
														.shopname,
													avatar: "",
													bio: this.info.bio,
													city: this.info.city,
													content: this.info.content
												}
												this.step = 3;
												uni.hideLoading()
												console.log(res)
											}

										}
									},
									complete() {
										uni.hideLoading()
									}
								});

							},
							complete() {
								uni.hideLoading()
							}
						});
					}
				});
			},
			change(val) {
				this.form1.city = val.data.join('');
			},
			next() {
				if (this.step == 1) {
					if (!this.form.name) {
						uni.showToast({
							icon: "none",
							title: "请输入名称"
						})
						return
					}
					if (!this.form.number) {
						uni.showToast({
							icon: "none",
							title: this.form.state == 0 ? '身份证号码' : "统一信用代码"
						})
						return
					}
					if (!this.form.mobile) {
						uni.showToast({
							icon: "none",
							title: "请输入手机号"
						})
						return
					}
					if (this.fileList2.length == 0) {
						uni.showToast({
							icon: "none",
							title: this.form.state == 0 ? '手持身份证' : "营业执照"
						})
						return
					}
					if (this.fileList3.length == 0) {
						uni.showToast({
							icon: "none",
							title: this.form.state == 0 ? '身份证人像面' : "法人身份证人像面"
						})
						return
					}
					if (this.fileList4.length == 0) {
						uni.showToast({
							icon: "none",
							title: this.form.state == 0 ? '身份证人像面' : "法人身份证国徽面"
						})
						return
					}
				}
				this.step += 1
			},
			back() {
				uni.removeStorageSync("shop_login_token")
				uni.removeStorageSync("shop_login_info")
				uni.reLaunch({
					url: "/pages/index"
				})
			},
			confirm(e) {
				if (e.value[0].id == this.choose.id) return
				this.choose = e.value[0];
				this.form.state = this.choose.id;
				this.show = false;
			},
			top() {
				this.step -= 1
			},
			deletePic1(e) {
				this.fileList1.splice(e.index, 1)
			},
			async afterRead1(e) {
				let that = this;
				uni.showLoading({
					mask: true,
					title: "上传中"
				})
				uni.uploadFile({
					url: 'https://fen.fuliaoxx.com/api/common/upload', // 接口url
					filePath: e.file.url,
					name: 'file',
					header: {
						isAdmin: true,
						token: uni.getStorageSync("shop_login_token")
					}, // 请求头
					success: async (res) => {
						let json = JSON.parse(res.data)
						// that.model.image = json.data.url;
						that.fileList1 = [{
							url: json.data
								.fullurl,
							key: json.data
								.url
						}]
						uni.hideLoading()
					},
				})
			},
			deletePic2(e) {
				this.fileList2.splice(e.index, 1)
			},
			async afterRead2(e) {
				let that = this;
				uni.showLoading({
					mask: true,
					title: "上传中"
				})
				uni.uploadFile({
					url: 'https://fen.fuliaoxx.com/api/common/upload', // 接口url
					filePath: e.file.url,
					name: 'file',
					header: {
						isAdmin: true,
						token: uni.getStorageSync("shop_login_token")
					}, // 请求头
					success: async (res) => {
						let json = JSON.parse(res.data)
						// that.model.image = json.data.url;
						that.fileList2 = [{
							url: json.data
								.fullurl,
							key: json.data
								.url
						}]
						uni.hideLoading()
					},
				})
			},
			deletePic3(e) {
				this.fileList3.splice(e.index, 1)
			},
			async afterRead3(e) {
				let that = this;
				uni.showLoading({
					mask: true,
					title: "上传中"
				})
				uni.uploadFile({
					url: 'https://fen.fuliaoxx.com/api/common/upload', // 接口url
					filePath: e.file.url,
					name: 'file',
					header: {
						isAdmin: true,
						token: uni.getStorageSync("shop_login_token")
					}, // 请求头
					success: async (res) => {
						let json = JSON.parse(res.data)
						// that.model.image = json.data.url;
						that.fileList3 = [{
							url: json.data
								.fullurl,
							key: json.data
								.url
						}]
						uni.hideLoading()
					},
				})
			},
			deletePic4(e) {
				this.fileList4.splice(e.index, 1)
			},
			async afterRead4(e) {
				let that = this;
				uni.showLoading({
					mask: true,
					title: "上传中"
				})
				uni.uploadFile({
					url: 'https://fen.fuliaoxx.com/api/common/upload', // 接口url
					filePath: e.file.url,
					name: 'file',
					header: {
						isAdmin: true,
						token: uni.getStorageSync("shop_login_token")
					}, // 请求头
					success: async (res) => {
						let json = JSON.parse(res.data)
						// that.model.image = json.data.url;
						that.fileList4 = [{
							url: json.data
								.fullurl,
							key: json.data
								.url
						}]
						uni.hideLoading()
					},
				})
			},
			deletePic5(e) {
				this.fileList5.splice(e.index, 1)
			},
			async afterRead5(e) {
				let that = this;
				uni.showLoading({
					mask: true,
					title: "上传中"
				})
				uni.uploadFile({
					url: 'https://fen.fuliaoxx.com/api/common/upload', // 接口url
					filePath: e.file.url,
					name: 'file',
					header: {
						isAdmin: true,
						token: uni.getStorageSync("shop_login_token")
					}, // 请求头
					success: async (res) => {
						let json = JSON.parse(res.data)
						// that.model.image = json.data.url;
						that.fileList5 = [{
							url: json.data
								.fullurl,
							key: json.data
								.url
						}]
						uni.hideLoading()
					},
				})
			},


		}
	}
</script>
<style lang="scss" scoped>
	.btn {
		background-color: black;
		color: white;
		text-align: center;
		padding: 26rpx 0;
		border-radius: 100px;
		margin: 30rpx;
	}

	.flex {
		display: flex;
		align-items: center;
	}

	.box {
		margin: 30rpx 0;
		background: linear-gradient(to bottom, #fff, #f8f8f8);
		border-radius: 30rpx 30rpx 0 0;

		.header {
			display: flex;
			align-items: center;
			justify-content: space-evenly;
			padding: 30rpx;

			.item {
				border-radius: 100px;
				background-color: #FFC400;
				border: 15rpx solid #fffcca;
				width: 80rpx;
				height: 80rpx;
				text-align: center;
				line-height: 80rpx;
				font-weight: 900;
				display: flex;
				justify-content: center;
				align-items: center;
			}

			.item2 {
				color: white;
				border-radius: 100px;
				background-color: #DBDAD5;
				border: 15rpx solid #fff;
				width: 80rpx;
				height: 80rpx;
				text-align: center;
				display: flex;
				justify-content: center;
				align-items: center;
				font-weight: 900;
			}

			.bor {
				width: 60rpx;
				height: 8rpx;
				border-radius: 100px;
				background-color: #FFC400;
			}

			.bor1 {
				width: 60rpx;
				height: 8rpx;
				border-radius: 100px;
				background-color: #DBDAD5;
			}
		}

		.title {
			padding: 30rpx 60rpx;
			font-weight: 600;
			font-size: 34rpx;
			background: linear-gradient(to right, #FFDD75, #FFEFBA);
			margin: 0 30rpx;
		}

		.input {
			margin: 0 30rpx;
			padding: 30rpx 40rpx;
			border-bottom: 1rpx solid #f8f8f8;
			background-color: white;
			display: flex;
			align-items: center;

			.view {
				color: #000000;
				width: 190rpx;
				opacity: 0.7;
			}
		}


	}
</style>